<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="车辆号码：">
            <el-input
              v-model="page.licensePlate"
              placeholder="请输入车辆号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="车辆类型：">
            <el-select v-model="page.truckTypeId" placeholder="请选择">
              <el-option
                v-for="(item, index) in truckType"
                :key="index"
                :label="item.name"
                :value="item.truckTypeId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车队名称：">
            <el-select v-model="page.fleetId" placeholder="请选择">
              <el-option
                v-for="(item, index) in fleet"
                :key="index"
                :label="item.name"
                :value="item.fleetId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="cz">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br />

    <el-dialog title="新增车辆" :visible.sync="addTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="*车辆类型">
            <el-select
              style="margin-right: 50%"
              v-model="AddTruck.truckTypeId"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in truckType"
                :key="index"
                :label="item.name"
                :value="item.truckTypeId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="*车牌号码">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车牌号码"
              v-model="AddTruck.licensePlate"
            ></el-input>
          </el-form-item>
          <el-form-item label="*所属车队">
            <el-select v-model="AddTruck.fleetId" placeholder="请选择">
              <el-option
                v-for="(item, index) in fleet"
                :key="index"
                :label="item.name"
                :value="item.fleetId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="GSP设备">
            <el-input
              placeholder="请输入GPS设备ID"
              v-model="AddTruck.deviceGpsId"
            ></el-input>
          </el-form-item>
          <el-form-item label="准载重量">
            <el-input
              placeholder="请输入准载重量"
              v-model="AddTruck.allowableLoad"
              ><template style="background-color: white" slot="append"
                >千克</template
              ></el-input
            >
          </el-form-item>
          <el-form-item label="准载体积">
            <el-input
              placeholder="请输入准载体积"
              v-model="AddTruck.allowableVolume"
              ><template style="background-color: white" slot="append"
                >方</template
              ></el-input
            >
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-button style="margin-right: 90%" @click="Add" type="danger"
          >+新增车辆</el-button
        >
      </el-form>
      <div>
        <el-table
          height="420px"
          :data="tableData"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
        >
          <el-table-column prop="id" label="序号" width="120"></el-table-column>
          <el-table-column prop="truckId" label="车辆编号"></el-table-column>
          <el-table-column
            prop="pdTruckType.name"
            label="车辆类型"
          ></el-table-column>
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
          ></el-table-column>
          <el-table-column prop="pdFleet.name" label="所属车队">
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID">
          </el-table-column>
          <el-table-column prop="allowableLoad" label="准载重量(kg)">
          </el-table-column>
          <el-table-column
            prop="allowableVolume"
            label="准载体积(方)"
          ></el-table-column>
          <el-table-column prop="status" label="过期状态">
            <template slot-scope="scope">
              {{ scope.row.status == 0 ? "已过期" : "" }}
              {{ scope.row.status == 1 ? "未过期" : "" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="pdTransportTrips.id"
            label="车次编号"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-link type="danger" @click="del(scope.row.truckId)"
                >删除</el-link
              >
              <!-- <el-link slot="reference" type="danger" @click="Del(scope.row.id)">删除</el-link>| -->
              <el-link type="primary" @click="ShowDetails(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 7, 10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  findTruckList,
  ShowPdTruckType,
  ShowPdFleet,
  AddPdTruck,
  DeleteTruckByid,
  ShowTruckLicense,
  ShowTransportTrips,
} from "@/api/wj/Vehicle";
export default {
  data() {
    return {
      tableData: [],
      all: {},
      formInline: {},
      visible: {},
      Truck: {},
      fleet: {},
      currentPage4: 4,
      total: 10,
      addTruck: false,
      AddTruck: {},
      page: {
        pageindex: 1,
        pagenum: 5,
        licensePlate: "",
        truckTypeId: "",
        fleetId: "",
      },
      truckType: {},
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pagenum = val;
      console.log(`每页 ${val} 条`);
      this.pageinfo();
    },
    handleCurrentChange(val) {
      this.page.pageindex = val;
      console.log(`当前页: ${val}`);
      this.pageinfo();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    cz() {
      this.page.licensePlate = "";
      this.page.truckTypeId = "";
      this.page.fleetId = "";
    },
    Add() {
      this.addTruck = true;
    },
    qx() {
      this.addTruck = false;
    },
    add() {
      AddPdTruck(this.AddTruck).then((data) => {
        if (data.data > 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addTruck = false;
          this.pageinfo();
        } else {
          this.$message({
            type: "info",
            message: "添加失败",
          });
        }
      });
    },
    ShowDetails(details) {
      this.$router.push({
        name: "ShowDetails",
        params: { dataForm: JSON.stringify(details) },
      });
      this.$message({
        message: "查看详情",
        type: "success",
      });
    },
    del(truckId) {
       this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          DeleteTruckByid(truckId).then((data) => {
            if (data.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.pageinfo();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    pageinfo() {
      findTruckList(this.page).then((data) => {
        this.tableData = data.data.list;
        this.total = data.data.total;
      });
    },
    onSubmit() {
      this.pageinfo();
    },
    ShowTruckType() {
      ShowPdTruckType().then((data) => {
        this.truckType = data.data;
      });
    },
    ShowFleet() {
      ShowPdFleet().then((data) => {
        this.fleet = data.data;
      });
    },
  },
  created() {
    this.pageinfo();
    this.ShowTruckType();
    this.ShowFleet();
  },
};
</script>

<style>
/* .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  } */
</style>